<!DOCTYPE html>

<head>
    <meta name='viewport' content='width=device-width, initial-scale=1' charset="utf-8" />
    <title>yobot用户信息</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/index.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.0/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-page-header @back="location='..'" content="yobot用户信息"></el-page-header>
        <template v-if="display">
            <p :hidden="edit">用户名：[[ nickname ]]
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit=true" circle></el-button>
            </p>
            <p :hidden="!edit">用户名：<el-input v-model="nickname" placeholder="昵称"></el-input>
                <el-button type="success" size="mini" icon="el-icon-check" @click="edit_nickname" circle></el-button>
            </p>
            <p>预约提醒偏好：
			<el-select v-model="notify_preference" placeholder="请选择" @change="edit_notify_preference">
				<el-option key="1" label="仅提醒一次" value="once"></el-option>
				<el-option key="2" label="提醒直至出刀" value="util_challenge"></el-option>
			</el-select>
            </p>
            <p>用户权限：[[ authority_group ]]</p>
            <p>公会战主群：[[ clan_group_id ]]</p>
            <p>上次登录时间：[[ last_login_time ]]</p>
            <p>上次登录ip地址：[[ last_login_ipaddr ]]（[[ addr.join('') ]]）</p>
        </template>
        <template v-else>
            <h1>yobot用户信息</h1>
            <p>你无法查看这个页面，[[ failure_reason ]]</p>
            <p><a href="#" onClick="javascript:history.go(-1);">返回</a></p>
        </template>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            display: true,
            failure_reason: '',
            addr: [],
            nickname: '',
			notify_preference: "once",
            clan_group_id: '',
            authority_group: '',
            last_login_ipaddr: '',
            last_login_time: '',
            edit: false,
            authtype: {
                1: '主人',
                2: '机器人管理员',
                10: '公会战管理员',
                100: '成员',
            },
        },
        mounted() {
            var thisvue = this;
            axios.get('./api/').then(function (res) {
                if (res.data.code != 0) {
                    thisvue.display = false;
                    failure_reason = res.data = message;
                } else {
                    thisvue.nickname = res.data.nickname;
                    thisvue.notify_preference = res.data.notify_preference == 1 ? "once" : "util_challenge";
                    thisvue.clan_group_id = res.data.clan_group_id;
                    thisvue.authority_group = thisvue.authtype[res.data.authority_group];
                    thisvue.last_login_ipaddr = res.data.last_login_ipaddr;
                    thisvue.last_login_time = thisvue.from_ts(res.data.last_login_time);
                    axios.get('{{ url_for("yobot_api_iplocation") }}?ip=' + thisvue.last_login_ipaddr).then(function (res) {
                        thisvue.addr = res.data;
                    })
                }
            }).catch(function (error) {
                console.log(error);
                thisvue.addr = ['未知'];
            });
        },
        methods: {
            edit_nickname: function (event) {
                var thisvue = this;
                axios.patch('./api/', { nickname: thisvue.nickname }).then(function (res) {
                    thisvue.edit = false;
                }).catch(function (error) {
                    alert('改名失败');
                    console.log(error);
                })
            },
			edit_notify_preference: function (event) {
                var thisvue = this;
                axios.patch('./api/', {
				    notify_preference: thisvue.notify_preference == "once" ? 1 : 2
				}).then(function (res) {
                    thisvue.$message({
                        message: '修改成功',
                        type: 'success',
                    });
                }).catch(function (error) {
					thisvue.$message.error('修改失败' + error);
                })
			},
            from_ts: function (ts) {
                if (ts == 0) {
                    return '-';
                }
                var nd = new Date();
                nd.setTime(ts * 1000);
                return nd.toLocaleString('chinese', { hour12: false });
            },
        },
        delimiters: ['[[', ']]'],
    })
</script>

</html>